<!-- filepath: /d:/git/adcarousel/app/static/templates/adcarousel_list_play.html -->
<!DOCTYPE html>
<html>

<head>
    <title>轮播</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            height: 100vh;
            width: 100vw;
        }

        .adcarousel {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            display: none;
            transition: opacity 1s ease-in-out;
        }

        .fade-in {
            animation: fadeIn 1s forwards;
        }

        .fade-out {
            animation: fadeOut 1s forwards;
        }

        .slide-in {
            animation: slideIn 1s forwards;
        }

        .datetime {
            position: absolute;
            font-family: 'Microsoft YaHei';
            font-weight: bold;
            color: white;
            font-size: 24px;
            left: 50px;
            top: 50px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="adcarousel" id="adcarousel"></div>
    <div class="datetime" id="datetime"></div>

    <script language="javascript">
        var adcarousels = [
            {% for adcarousel in adcarousels %}
            {
                picpath: '{{ adcarousel.picpath }}',
                showtimeout: {{ adcarousel.showtimeout }},
                fontcolor: '{{ adcarousel.fontcolor }}',
                fontsize: {{ adcarousel.fontsize }},
                fontposition: '{{ adcarousel.fontposition }}',
                word: '{{ adcarousel.word }}'
            },
            {% endfor %}
        ];

        var currentIndex = 0;
        var dateTimeInterval;

        function showAdcarousel(index) {
            var adcarousel = adcarousels[index];
            var adcarouselElement = document.getElementById('adcarousel');
            var datetimeElement = document.getElementById('datetime');

            adcarouselElement.style.backgroundImage = 'url(' + adcarousel.picpath + ')';
            adcarouselElement.classList.add('fade-in');
            adcarouselElement.style.display = 'block';

            var fontPosition = adcarousel.fontposition.split(',');
            datetimeElement.style.left = fontPosition[0] + 'px';
            datetimeElement.style.top = fontPosition[1] + 'px';
            datetimeElement.style.color = adcarousel.fontcolor;
            datetimeElement.style.fontSize = adcarousel.fontsize + 'px';

            if (adcarousel.word) {
                datetimeElement.innerText = adcarousel.word;
                clearInterval(dateTimeInterval);
                dateTimeInterval = null;
            } else {
                updateDateTime();
                if (!dateTimeInterval) {
                    dateTimeInterval = setInterval(updateDateTime, 1000);
                }
            }

            setTimeout(function () {
                adcarouselElement.classList.remove('fade-in');
                adcarouselElement.classList.add('fade-out');
                setTimeout(function () {
                    adcarouselElement.style.display = 'none';
                    adcarouselElement.classList.remove('fade-out');
                    currentIndex = (currentIndex + 1) % adcarousels.length;
                    showAdcarousel(currentIndex);
                }, 1000);
            }, adcarousel.showtimeout * 1000);
        }

        function updateDateTime() {
            var now = new Date();
            var formattedDateTime = now.getFullYear() + '.' +
                ('0' + (now.getMonth() + 1)).slice(-2) + '.' +
                ('0' + now.getDate()).slice(-2) + ' ' +
                ('0' + now.getHours()).slice(-2) + ':' +
                ('0' + now.getMinutes()).slice(-2) + ':' +
                ('0' + now.getSeconds()).slice(-2);
            document.getElementById('datetime').innerText = formattedDateTime;
        }

        showAdcarousel(currentIndex);
    </script>
</body>

</html>